<!-- 
 * 日报详情
 * @author: 张锋
 * @since: 2025-02-13
 * index.vue
-->
<template>
  <div class="scientific-com-container detailsPageBox p20">
      <div class="detailsMain" id="pdfDom">
          <div class="organization-logo">
              <div class="title">
                  <div></div>
                  <div class="word">施工图片</div>
              </div>
              <div class="add-organization-logo">
                <img  :src="state.logo" class="avatar" />
              </div>
          </div>
          <div class="basic-info">
              <div class="title">
                  <div></div>
                  <div class="word">基本信息</div>
              </div>
              <el-form :model="form" label-position="right" :rules="rules" ref="validateForm">
                  <div class="add-basic-info">
                      <el-row>
                          <el-col :span="8">
                              <el-form-item label="机构名称：" label-width="120px"  class="detailsKey">
                                  <div class="detailsValue">{{ state.logo }}</div>
                              </el-form-item>
                          </el-col>
                          <el-col :span="8">
                              <el-form-item label="联系电话：" label-width="100px" class="detailsKey">
                                  <div class="detailsValue">{{ state.logo }}</div>
                              </el-form-item>
                          </el-col>
                          <el-col :span="8">
                              <el-form-item label="机构专利数量：" label-width="130px" class="detailsKey">
                                  <div class="detailsValue">{{ state.logo }}</div>
                              </el-form-item>
                          </el-col>
                      </el-row>
                      <el-row>
                          <el-col :span="8">
                              <el-form-item label="机构所在地：" label-width="120px" class="detailsKey" >
                                  <div class="detailsValue">{{ state.logo }}</div>
                              </el-form-item>
                          </el-col>
                          <el-col :span="8">
                              <el-form-item label="详细地址：" label-width="100px" class="detailsKey">
                                  <div class="detailsValue">{{ state.logo }}</div>
                              </el-form-item>
                          </el-col>
                      </el-row>
                  </div>
               
              </el-form>
          </div>
      </div>
  </div>
</template>

<script setup>
import { reactive, onMounted, ref, defineProps, nextTick } from 'vue'
import {
getAllLogDetailAPI,
} from '@/api/interface/projects.js'
import { ElMessage } from 'element-plus'
import { successHandle, detailHandleFinish } from '@/utils/common.js'
import { sessionstorage } from '@/utils/storage.js'
import { useRouter } from 'vue-router';
const router = useRouter();

const props = defineProps({
  type: {
      type: Number,
      default: 1 //1.新增 2.编辑 3.详情
  }
})
const state = reactive({
    id: '',
  logo: '',//机构图标
})

onMounted(() => {
    state.id = Number(router.currentRoute.value.query.id)
    getDetail()
})

//根据eid获取公司logo
const getDetail = () => {
  const params = {
    id: form.eid
  }
  getAllLogDetailAPI(params).then(res => {
      const { status, data } = res
      if (status === 200) {
          state.logo = data
      }

  })

}




</script>

<style lang="scss" scoped>
.title {
  display: flex;
  margin-bottom: 20px;

  div {
      &:first-child {
          width: 6px;
          background-color: #00a2ff;
          margin-right: 10px;
      }
  }

  .word {
      color: #333;
      font-weight: bold;
      font-size: 16px;
  }
}

.organization-logo {
  .add-organization-logo {
      margin-bottom: 30px;

      .avatar-upload {
          .avatar {
              width: 120px;
              height: 120px;
          }

          .upload-box {
              width: 120px;
              height: 120px;
              background: #f5f7fd;
              border-radius: 4px;
              display: flex;
              align-items: center;
              justify-content: center;

              .icon {
                  text-align: center;
              }

              .word {
                  color: #a3adc5;
                  font-size: 14px;
                  margin-top: 10px;
              }
          }
      }
  }
}

.basic-info {
  margin-bottom: 30px;

  .add-basic-info {
      width: 100%;
      background: #f5f7fd;
      border-radius: 4px;
      padding: 20px 20px 0 20px;
      box-sizing: border-box;
  }

  .organization-intro {
      margin-top: 30px;
  }

  .detailsKey {
      :deep(.el-form-item__label) {
          color: #333333;
          font-size: 14px;
      }

      .detailsValue {
          color: #333333;
          font-size: 14px;
          font-weight: bold;
      }
  }

  .detailsBrief {
      color: #333333;
      font-size: 12px;
      margin-bottom: 20px;
  }
}
</style>
